packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (1)

160-163: jq output may lack pretty-printing for CodeEditor display.

When filterType === 'jq', formattedData uses jqResult directly (line 162). Per the relevant code snippets, jqResult is raw stdout from jq-wasm without the pretty-printing that formatResponse applies via fastJsonFormat().

This could result in compact, hard-to-read JSON in the editor. Consider parsing and re-formatting the jq output:

♻️ Proposed fix

+import { safeStringifyJSON, safeParseJSON } from 'utils/common';
+
 // In formattedData useMemo:
       if (filterType === 'jq' && filter) {
-        return jqResult ?? formatResponse(data, dataBuffer, selectedFormat, null);
+        if (jqResult) {
+          // Pretty-print the jq result
+          const parsed = safeParseJSON(jqResult);
+          return parsed !== undefined ? safeStringifyJSON(parsed, true) : jqResult;
+        }
+        return formatResponse(data, dataBuffer, selectedFormat, null);
       }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/bruno-app/src/components/ResponsePane/QueryResult/index.js` around
lines 160 - 163, When filterType === 'jq' the code returns jqResult raw
(jqResult) which is unformatted stdout from jq-wasm; instead parse and
pretty-print it before returning so the CodeEditor shows formatted JSON. Update
the branch that currently returns jqResult ?? formatResponse(...) to: if
jqResult is present, attempt to JSON.parse(jqResult) and pass the parsed value
through formatResponse (or fastJsonFormat via formatResponse) to produce
pretty-printed output, falling back to the original jqResult string if
parsing/formatting fails; ensure you reference the existing symbols filterType,
jqResult, formatResponse (and fastJsonFormat used inside it) when making the
change.

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (1)

162-165: Brief flicker during jq filter computation.

When jqResult is null (lines 139-140 clear it), the fallback shows unfiltered data momentarily. This is acceptable UX, but if users find it jarring, consider preserving the previous result until the new one arrives or showing a subtle loading indicator.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/bruno-app/src/components/ResponsePane/QueryResult/index.js` around
lines 162 - 165, The fallback returns unfiltered data when jqResult is null
causing a flicker; change the logic so the UI preserves the previous rendered
result (e.g., keep a cached "lastJqResult") or shows a subtle loading state
instead of immediately calling formatResponse(data,...). Update the branch that
checks filterType === 'jq' && filter to return lastJqResult if jqResult is null
(or a loading flag) and only replace lastJqResult when jqResult becomes
non-null; use the existing symbols jqResult, filterType, filter, formatResponse,
data, dataBuffer, and selectedFormat to find and update the code paths that
clear and render jq results.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js (1)

61-76: Consider adding accessible labels to toggle buttons.

The toggle buttons lack aria-label or aria-pressed attributes for screen reader users. This is a minor accessibility enhancement.

♿ Suggested accessibility improvement

           <button
-            className={`toggle-btn ${filterType === 'jsonpath' ? 'active' : ''}`}
+            className={`toggle-btn ${filterType === 'jsonpath' ? 'active' : ''}`}
+            aria-pressed={filterType === 'jsonpath'}
+            aria-label="Filter with JSONPath"
             onClick={() => handleFilterTypeChange('jsonpath')}
           >
             JSONPath
           </button>
           <button
-            className={`toggle-btn ${filterType === 'jq' ? 'active' : ''}`}
+            className={`toggle-btn ${filterType === 'jq' ? 'active' : ''}`}
+            aria-pressed={filterType === 'jq'}
+            aria-label="Filter with jq"
             onClick={() => handleFilterTypeChange('jq')}
           >
             jq
           </button>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js`
around lines 61 - 76, The toggle buttons for switching filter types lack
accessible labeling—update the two buttons in QueryResultFilter so each includes
an aria-label (e.g., "Select JSONPath filter" and "Select jq filter") and an
aria-pressed attribute tied to the current filterType state (use
aria-pressed={filterType === 'jsonpath'} for the JSONPath button and
aria-pressed={filterType === 'jq'} for the jq button); keep the existing onClick
handlers (handleFilterTypeChange) and class logic intact so the visual and
programmatic state remain consistent with isExpanded and mode checks.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js (1)

63-74: Consider adding type="button" to prevent unintended form submissions.

While these buttons aren't inside a form currently, explicitly setting type="button" is a defensive practice that prevents accidental form submission if the component is ever nested inside a form element.

💡 Proposed fix

          <button
+           type="button"
            className={`toggle-btn ${filterType === 'jsonpath' ? 'active' : ''}`}
            onClick={() => handleFilterTypeChange('jsonpath')}
          >
            JSONPath
          </button>
          <button
+           type="button"
            className={`toggle-btn ${filterType === 'jq' ? 'active' : ''}`}
            onClick={() => handleFilterTypeChange('jq')}
          >
            jq
          </button>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js`
around lines 63 - 74, The toggle buttons for selecting filter type (the JSX
buttons that use filterType and onClick={() => handleFilterTypeChange(...)})
should explicitly include type="button" to prevent accidental form submission if
this component is later nested inside a form; update both the JSONPath and jq
<button> elements to add type="button" while leaving their className and onClick
handlers unchanged.